import { Badge, TableColumnsType, Image, Tooltip, Typography } from 'antd'
import { NavigateFunction } from 'react-router-dom'
import type { ITableData } from './types'
import { type ITableData as ITableDataStyle } from '../Style/types'
import { GOODS_PLAN_STATUS_TEXT } from '@/constant/goods'
import { getImageByUrl } from '@/utils/getImageByUrl'
import { downloadByOwnUrl, getNameByOwnUrl } from '@/utils/util'
export const useIndexColumns = ({
  onShowStyleModal,
  navigate,
}: {
  onShowStyleModal: (info: ITableData) => void
  navigate: NavigateFunction
}): TableColumnsType<ITableData> => [
  {
    fixed: 'left',
    title: '商品企划编号',
    dataIndex: 'planNo',
    key: 'planNo',
    align: 'center',
    width: 150,
    render: (info, rows) => {
      return info ? (
        <Typography.Link onClick={() => navigate('/goods/plan/detail?planingId=' + rows.planingId)}>
          {info}
        </Typography.Link>
      ) : (
        '-'
      )
    },
  },
  {
    title: '开发季',
    dataIndex: 'devSeasonName',
    key: 'devSeasonName',
    align: 'center',
    width: 120,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '款式分类',
    dataIndex: 'classId',
    key: 'classId',
    align: 'center',
    width: 250,
    ellipsis: {
      showTitle: false,
    },
    render: (info, rows) => {
      return (
        <Tooltip
          placement="top"
          title={
            (rows.bigClassName ? rows.bigClassName : '') +
            (rows.midClassName ? '-' + rows.midClassName : '') +
            (rows.smallClassName ? '-' + rows.smallClassName : '') +
            (rows.tinyClassName ? '-' + rows.tinyClassName : '')
          }
        >
          {(rows.bigClassName ? rows.bigClassName : '') +
            (rows.midClassName ? '-' + rows.midClassName : '') +
            (rows.smallClassName ? '-' + rows.smallClassName : '') +
            (rows.tinyClassName ? '-' + rows.tinyClassName : '')}
        </Tooltip>
      )
    },
  },
  {
    title: '适销季节',
    dataIndex: 'seasonCodeName',
    key: 'seasonCodeName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '企划SKC数量',
    dataIndex: 'skcPlanNum',
    key: 'skcPlanNum',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '企划状态',
    dataIndex: 'planStatus',
    key: 'planStatus',
    align: 'center',
    width: 120,
    render: (info) => {
      return <Badge status={info == 1 ? 'success' : 'error'} text={GOODS_PLAN_STATUS_TEXT[info] || '-'} />
    },
  },
  {
    title: '开发款式',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return <Typography.Link onClick={() => onShowStyleModal(rows)}>查看</Typography.Link>
    },
  },
  {
    title: (
      <div>
        <div>上市日期</div>
        <div>过季日期</div>
      </div>
    ),
    key: 'releaseSeasonDateStr',
    align: 'center',
    width: 150,
    render: (_, rows) => {
      return (
        <div>
          <div>{rows.releaseSeasonDateStr || '-'}</div>
          <div>{rows.overSeasonDateStr || '-'}</div>
        </div>
      )
    },
  },
  {
    title: (
      <div>
        <div>企划毛利率</div>
        <div>毛利率下限</div>
      </div>
    ),
    key: 'planRate',
    align: 'center',
    width: 150,
    render: (_, rows) => {
      return (
        <div>
          <div>{rows.planRateStr || '-'}</div>
          <div>{rows.profitRateLowerLimitStr || '-'}</div>
        </div>
      )
    },
  },
  {
    title: '吊牌价',
    dataIndex: 'originSalePrice',
    key: 'originSalePrice',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '吊牌价修正原因',
    dataIndex: 'updateReason',
    key: 'updateReason',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '价格属性',
    dataIndex: 'pricePropertyName',
    key: 'pricePropertyName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '定价权限',
    dataIndex: 'priceAuthName',
    key: 'priceAuthName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '开发定位',
    dataIndex: 'devLocationName',
    key: 'devLocationName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '季节分组',
    dataIndex: 'seasonGroupName',
    key: 'seasonGroupName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: (
      <div>
        <div>商品描述</div>
        <div>附件</div>
      </div>
    ),
    key: 'productDesc',
    align: 'center',
    width: 130,
    ellipsis: {
      showTitle: false,
    },
    render: (_, rows) => {
      return (
        <div>
          <div>
            <Tooltip placement="top" title={rows.productDesc} key={rows.productDesc}>
              <Typography.Text ellipsis>{rows.productDesc || '-'}</Typography.Text>
            </Tooltip>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {rows.fileId &&
              rows.fileId.split(',').map((item) => {
                return (
                  <Tooltip placement="top" title={item} key={item}>
                    <Typography.Link
                      ellipsis
                      onClick={() => {
                        downloadByOwnUrl(item)
                      }}
                    >
                      {getNameByOwnUrl(item)}
                    </Typography.Link>
                  </Tooltip>
                )
              })}
          </div>
        </div>
      )
    },
  },
  {
    title: '适销年龄段',
    dataIndex: 'suitAgeGroupName',
    key: 'suitAgeGroupName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '商品等级',
    dataIndex: 'productLevelName',
    key: 'productLevelName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '设计师/买手',
    dataIndex: 'designerName',
    key: 'designerName',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
]

export const useViewStyleColumns = (): TableColumnsType<ITableDataStyle> => [
  {
    title: '款式图',
    dataIndex: 'mainPicFileId',
    key: 'mainPicFileId',
    align: 'center',
    width: 120,
    render: (info) => {
      return (
        <Image rootClassName="table_image" width={50} height={50} src={info} fallback={getImageByUrl('moren.png')} />
      )
    },
  },
  {
    title: '设计编码',
    dataIndex: 'designCode',
    key: 'designCode',
    align: 'center',
    width: 120,
    render: (info) => {
      return info ? info : '-'
    },
  },
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    width: 120,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="top" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: '款式名称',
    dataIndex: 'spuName',
    key: 'spuName',
    align: 'center',
    width: 120,
    ellipsis: {
      showTitle: false,
    },
    render: (info, rows) => {
      return (
        <Tooltip placement="top" title={info}>
          <Typography.Text ellipsis style={{ paddingLeft: 12, paddingRight: 12 }}>
            {info}
          </Typography.Text>
        </Tooltip>
      )
    },
  },
  {
    title: '商品系列',
    dataIndex: 'configClassName',
    key: 'configClassName',
    align: 'center',
    width: 150,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="top" title={info}>
          <Typography.Text ellipsis style={{ paddingLeft: 12, paddingRight: 12 }}>
            {info}
          </Typography.Text>
        </Tooltip>
      )
    },
  },
  {
    title: (
      <div>
        <div>开发SKC数</div>
        <div>企划SKC数</div>
      </div>
    ),
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    width: 120,
    render: (_, rows) => {
      return (
        <div>
          <div>{rows?.skcDevNum == 0 ? 0 : rows?.skcDevNum ? rows?.skcDevNum : '-'}</div>
          <div>{rows?.skcPlanNum == 0 ? 0 : rows?.skcPlanNum ? rows?.skcPlanNum : '-'}</div>
        </div>
      )
    },
  },
  {
    title: '款式',
    children: [
      {
        title: '图片',
        dataIndex: 'pic',
        key: 'pic',
        width: 100,
        align: 'center',
        render: (_, rows) => {
          return (
            rows?.spuColorDetails?.map((item) => {
              return (
                <div key={item.colorDetailId} className="border_bottom_nolast ant-table-cell-ellipsis">
                  {item?.picUrl ? (
                    <img style={{ display: 'inline-block', width: 30, height: 30 }} src={item?.picUrl} />
                  ) : item.rgbValue ? (
                    <span
                      style={{
                        width: 30,
                        height: 30,
                        backgroundColor: `rgb${item.rgbValue}`,
                        display: 'inline-block',
                        verticalAlign: 'middle',
                      }}
                    ></span>
                  ) : (
                    '-'
                  )}
                </div>
              )
            }) || '-'
          )
        },
      },
      {
        title: '颜色编码',
        dataIndex: 'color',
        key: 'color',
        width: 100,
        align: 'center',
        render: (_, rows) => {
          return (
            rows?.spuColorDetails?.map((item) => {
              return (
                <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item.colorDetailId}>
                  {item.colorCode || '-'}
                </div>
              )
            }) || '-'
          )
        },
      },
      {
        title: '颜色名称',
        dataIndex: 'colorName',
        key: 'colorName',
        width: 100,
        align: 'center',
        render: (_, rows) => {
          return (
            rows?.spuColorDetails?.map((item) => {
              return (
                <div className="border_bottom_nolast ant-table-cell-ellipsis" key={item.colorDetailId}>
                  {item.colorDetailName || '-'}
                </div>
              )
            }) || '-'
          )
        },
      },
    ],
  },
]
